<template>
  <scroll-view scroll-y class="swiper-scroll">
    <!-- 题干 -->
    <view class="title">
      <text decode class="title-index">{{ +paperNum + 1 }}.&nbsp;&nbsp;</text>
      <view class="title-content">
        <text class="paper-type-tag">
          {{ config.paperTypeDict[paperItem.exam_type] }}
        </text>
        <rich-text class="rich-text" :nodes="paperItem.exam_title"></rich-text>
      </view>
    </view>
    <!-- 选项 -->
    <view class="options">
      <exam-options :data="paperItem" @change="onSelect"></exam-options>
    </view>
    <!-- 答案 -->
    <view class="anwser" v-if="paperItem.submit">
      <text decode>
        正确答案&nbsp;
        <text decode class="anwser-text">
          {{ paperItem?.exam_answer?.toString() || '--' }}
        </text>
        &nbsp;&nbsp;
      </text>
      <text>
        你的答案&nbsp;
        <text decode
          :class="[paperItem.correct ? 'anwser-correct' : 'anwser-wrong']">
          {{ paperItem?.selected?.toString() || '--' }}
        </text>
      </text>
    </view>
    <!-- 解析 - 背题模式直接显示解析 -->
    <view class="analysis" v-if="paperItem.submit || examType == config.examTypeDict[0]">
      <view class="analysis-title">解析</view>
      <rich-text class="rich-analysis" :nodes="paperItem.analysis"></rich-text>
      <view class="feedback">
        <text @click="onFeedback(paperItem)">{{ config.feedbackText }}</text>
      </view>
    </view>
    <!-- 按钮控制 -->
    <view class="control">
      <view class="control-btn">
        <button size="mini" type="default" :disabled="curIndex == 0"
          @click="prev">上一题</button>
      </view>
      <view class="control-btn">
        <button v-if="examType == config.examTypeDict[1]" size="mini" type="primary"
          :disabled="paperItem.submit" @click="submit(paperItem)">
          提交
        </button>
        <!-- 考试模式最后一题才显示交卷 -->
        <button v-else-if="examType == config.examTypeDict[2] && curIndex == total - 1"
          size="mini" type="primary" :disabled="paperItem.submit"
          @click="complete">
          交卷
        </button>
        <view v-else-if="examType == config.examTypeDict[2] && curIndex < total - 1"
          style="width: 100%; font-size: 12px; text-align: center; opacity: 0.4">
          {{ config.toCompleteText }}
        </view>
      </view>
      <view class="control-btn">
        <button size="mini" type="default" :disabled="curIndex == total - 1"
          @click="next">
          下一题
        </button>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { computed, inject, onUnmounted, ref, watch } from 'vue'
import ExamOptions from './exam-options.vue'
import config from './config.js'

const examData = inject('sv-exam-data')
const examType = inject('sv-exam-type')

const props = defineProps({
  // 当前题目
  item: {
    type: Object,
    default: () => {}
  },
  // 当前题目索引
  index: {
    type: Number,
    default: 0
  },
  // 题号
  paperNum: {
    type: Number,
    default: 0
  },
})

const emits = defineEmits(['update:index'])

const curIndex = ref(props.index)


const total = computed(() => {
  return examData.value.length || 0
})

const paperItem = ref(props.item)
watch(() => props.item, (newItem) => {
  paperItem.value = newItem
})

watch(() => props.index, (newVal) => {
  curIndex.value = newVal
}, { immediate: true })

function prev() {
  curIndex.value = curIndex.value <= 0 ? 0 : curIndex.value - 1
  emits('update:index', curIndex.value)
}

function next() {
  curIndex.value = curIndex.value >= total.value - 1 ? total.value - 1 : curIndex.value + 1
  emits('update:index', curIndex.value)
}

// 提交
function submit() {
  paperItem.value.submit = true
  // 跨组件通信 - 提交
  uni.$emit('e-exam-paper-item-submit', {
    select: paperItem.value.selected || [],
    correct: paperItem.value.correct || false,
    index: props.paperNum,
    paper: paperItem.value
  })
}

function onSelect(e) {
  paperItem.value.selected = e.selected
  paperItem.value.correct = e.correct
}

/**
 * 纠错
 */
function onFeedback(e) {
  uni.$emit('e-exam-paper-item-feedback', e)
}

// 交卷
function complete() {
  uni.showModal({
    title: '交卷',
    content: '确认检查无误后交卷吗？',
    showCancel: true,
    success: ({ confirm }) => {
      if (confirm) {
        // 跨组件通信 - 交卷
        uni.$emit('e-exam-paper-complete', examData.value)
      }
    }
  })
}

// 监听交卷
onCompleted()

function onCompleted() {
  // exam模式开启交卷监听
  if (examType.value == config.examTypeDict[2]) {
    uni.$on('e-exam-paper-complete', () => {
      // 唤醒提交
      submit()
    })
  }
}

onUnmounted(() => {
  // 移除事件监听
  uni.$off('e-exam-paper-item-submit')
  uni.$off('e-exam-paper-complete')
  uni.$off('e-exam-paper-item-feedback')
})
</script>

<style lang="scss">
.swiper-scroll {
  height: 100%;
  padding-bottom: var(--card-header-height);

  .title {
    padding: var(--paper-unit-12);
    box-sizing: border-box;
    display: flex;

    .title-index {
      line-height: 1.6;
    }

    .title-content {
      flex: 1;

      .paper-type-tag {
        background-color: var(--primary-color);
        margin-right: var(--paper-unit-12);
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
        color: #ffffff;
        font-size: 12px;
        box-sizing: border-box;
        float: left;
        position: relative;
        top: 6rpx;
      }

      .rich-text {
        line-height: 1.6;
      }
    }

  }

  .options {
    padding: var(--paper-unit-12);
    box-sizing: border-box;
  }

  .anwser {
    margin: var(--paper-unit-12);
    padding: var(--paper-unit-12);
    box-sizing: border-box;
    background-color: var(--sub-bg-color);
    border-radius: calc(#{var(--paper-unit-12)} / 2);

    .anwser-text,
    .anwser-correct {
      font-weight: 700;
      color: var(--success-color);
    }

    .anwser-wrong {
      font-weight: 700;
      color: var(--error-color);
    }
  }

  .analysis {
    margin: var(--paper-unit-12);
    padding: var(--paper-unit-12);
    box-sizing: border-box;
    background-color: var(--sub-bg-color);
    border-radius: calc(#{var(--paper-unit-12)} / 2);

    .analysis-title {
      font-size: 14px;
      line-height: 1.5;
      color: var(--primary-color);

      &::before {
        content: '';
        display: inline-block;
        width: 8rpx;
        border-radius: 4rpx;
        height: var(--paper-unit-12);
        background-color: var(--primary-color);
        margin-right: calc(#{var(--paper-unit-12)} / 2);
      }
    }

    .feedback {
      font-size: 12px;
      margin-top: var(--paper-unit-12);
      opacity: 0.6;
      text-align: right;
    }
  }

  .control {
    width: 100%;
    height: var(--card-header-height);
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 1;

    .control-btn {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}
</style>